<template>
<div>

<el-button @click="add()">添加</el-button>
  <el-table :data="materialsList" style="width: 100%">

      <el-table-column label="编号">
        <!-- 插槽，类似于迭代变量 -->
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.matId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="材料">

        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.matName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="价格" >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.matPrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="数量" >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.matNumber }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="update(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="delInfo(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
<!-- page-size:默认每页显示条数 -->

<div class="block">
    <el-pagination
      @size-change="selectPage"
      @current-change="handleCurrentChange"
      :current-page="curPage"
      :page-sizes="[1, 3, 5, 7]"
      :page-size="rows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>


   <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="isShow" width="30%">
      <el-form ref="form" label-width="80px">
                  <br>
                  <el-form-item label="材料">
                    <el-col :span="21">
                      <input type="hidden" v-model="materialsForm.matId" />
                      <el-input  placeholder="请输入材料名" v-model="materialsForm.matName" ></el-input>
                    </el-col>

                  </el-form-item>
                  <el-form-item label="价格">
                    <el-col :span="21">
                      <el-input placeholder="请输入价格" v-model="materialsForm.matPrice"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="库存">
                    <el-col :span="21">
                      <el-input placeholder="请输入库存" v-model="materialsForm.matNumber"></el-input>
                    </el-col>
                </el-form-item>
                </el-form>
  <span slot="footer" class="dialog-footer">
             <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="saveInfo">保存</el-button>
        </span>
    </el-dialog>


</div>
</template>

<script>
  export default{
    name:"materialsList",
    data(){
      return{
      materialsList:[],
      title:"新增", //模态框标题
      materialsForm:{//表单的请求项
        matId:null,
        matName:"",
        matNumber:"",
        matPrice:""
      },
      total:0,//总条数
      totalPage:0,//总页数
      curPage:1,//当前页
      rows:5,//每页显示条数
      isShow:false
      }
    },
    methods:{
      loaddata(){//加载数据
        var mythis=this;
        $.ajax({
          url:"http://localhost:8080/Materials/materialsList",
          type:"get",
          data:{"page":mythis.curPage,"row":mythis.rows},
          dataType:"json",
          success:function(data){
            console.log(data)
            mythis.materialsList=data.info;
            mythis.total=data.total;
            mythis.totalPage=data.totalPage
          }

        })
      },
      add(){
        this.isShow=true;
        //更改模态框的标题
        this.title="新增";
        //清除表单元素
        this.materialsForm.matId=0;
         this.materialsForm.matName="";
         this.materialsForm.matNumber="";
         this.materialsForm.matPrice="";

      },
      update(x){//打开修改模态框
        this.isShow=true;
        //更改模态框的标题
        this.title="修改";
        //把选中的值赋值给模态框的表单元素
       this.materialsForm.matId=x.matId;
        this.materialsForm.matName=x.matName;
        this.materialsForm.matNumber=x.matNumber;
        this.materialsForm.matPrice=x.matPrice;
      },
      saveInfo(){//保存
      var url=""
        if(this.title=="修改"){

          url="http://localhost:8080/Materials/updateMaterials"
        }else{
           url="http://localhost:8080/Materials/addMaterials"
        }
        var mythis=this;
        $.ajax({
          url:url,
          type:"get",
          data:mythis.materialsForm,
          dataType:"json",
          success:function(data){
            console.log(data)
            mythis.$alert(data.info);
            if(data.info=="修改成功"||data.info=="添加成功"){
              //关闭模态框
             mythis.isShow=false;
              //刷新
              mythis.loaddata();
            }
          }
        })
      },
      delInfo(x){
        var is = confirm("你确定删除数据吗？");
        if(is){
          var mythis=this;
          $.ajax({
            url:"http://localhost:8080/Materials/delMaterials",
            type:"get",
            data:{"id":x.matId},
            dataType:"json",
            success:function(data){
              console.log(data)
              mythis.$alert(data.info);
              if(data.info=="删除成功"){
                //关闭模态框
                mythis.isShow=false;
                //刷新
                mythis.loaddata();
              }
            }
          })
        }
      },
      indexPage(){//首页
        this.curPage=1;
         this.loaddata();
      },
      endPage(){//尾页
         this.curPage=this.totalPage;
         this.loaddata();
      },
      prePage(){//上一页
        this.curPage--;
        if(this.curPage<1){
          this.curPage=1;
        }
        this.loaddata();
      },
      nextPage(){//下一页
        this.curPage++;
        if( this.curPage>this.totalPage){
           this.curPage=this.totalPage;
        }
        this.loaddata();
      },
      selectPage(v){//用户选择的页数
      this.rows=v;
        this.loaddata();
      },
      handleCurrentChange(v){//当前页触发事件
        this.curPage=v;
        this.loaddata();

      }
    },
    mounted(){
      this.loaddata();
    }
  }
</script>

<style>
</style>
